.customerCase {
  &-header {
    width: 100%;
    height: 500px;

    .text-title {
      margin-top: 216px;
      margin-left: 240px;
      font-family: PingFangSC-Medium, "PingFang SC";
      font-size: 46px;
      font-weight: 500;
      line-height: 69px;
      color: #333;
    }
  }

  &-wapper {
    .group1 {
      width: 100%;
      height: 499px;
      padding-top: 80px;
      padding-left: 240px;
      background: rgb(247 249 250 / 100%);

      &-title {
        margin-bottom: 22px;
        font-family: PingFangSC-Medium, "PingFang SC";
        font-size: 38px;
        font-weight: 500;
        line-height: 53px;
        color: #333;
      }

      &-content {
        .text-content {
          width: 900px;
          padding-top: 25px;
          margin-right: 159px;
          font-family: PingFangSC-Regular, "PingFang SC";
          font-size: 18px;
          font-weight: 400;
          line-height: 35px;
          color: #333;
        }

        .image-box {
          max-width: 279px;
          max-height: 240px;
        }
      }
    }

    .group2 {
      width: 100%;
      height: 563px;
      padding-top: 80px;
      background: #fff;

      &-title {
        margin-bottom: 14px;
        font-family: PingFangSC-Regular, "PingFang SC";
        font-size: 38px;
        font-weight: 400;
        line-height: 53px;
        color: #333;
      }

      &-text {
        width: 1019px;
        margin-bottom: 8px;
        font-family: PingFangSC-Regular, "PingFang SC";
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        color: #666;
        text-align: center;
      }

      .text-list {
        column-gap: 39px;
        height: 274px;

        li {
          position: relative;
          width: 323px;
          padding-top: 136px;

          span {
            position: relative;
            font-family: PingFangSC-Regular, "PingFang SC";
            font-size: 18px;
            font-weight: 400;
            line-height: 25px;
            color: #333;
          }

          .text-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 167px;
            height: 100%;
          }
        }
      }
    }

    .group3 {
      width: 100%;
      height: 710px;
      padding-top: 80px;
      background: rgb(247 249 250 / 100%);

      &-title {
        margin-bottom: 70px;
        font-family: Helvetica;
        font-size: 38px;
        line-height: 46px;
        color: #333;
      }

      &-content {
        .group3-image {
          width: 886px;
          height: 335px;
          margin-right: 50px;
        }

        .text-content {
          width: 502px;

          .text1 {
            margin-bottom: 30px;
            font-family: PingFangSC-Regular, "PingFang SC";
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
            color: #333;
          }

          .line {
            width: 502px;
            height: 1px;
            margin-bottom: 30px;
            background: #d8d8d8;
          }

          .text-items {
            row-gap: 24px;

            li {
              font-family: PingFangSC-Regular, "PingFang SC";
              font-size: 16px;
              font-weight: 400;
              line-height: 22px;
              color: #666;
            }
          }
        }
      }
    }

    .group4 {
      width: 100%;
      height: 737px;
      padding-top: 80px;
      background: #fff;

      &-title {
        margin-bottom: 70px;
        font-family: PingFangSC-Regular, "PingFang SC";
        font-size: 38px;
        font-weight: 400;
        line-height: 53px;
        color: #333;
      }

      .card-items {
        gap: 24px;
        width: 1440px;
        flex-wrap: wrap;

        li {
          width: 708px;
          height: 210px;
          padding: 42px 40px;
          cursor: pointer;
          background: linear-gradient(180deg, rgb(245 246 249 / 80%) 0%, #fff 100%);
          border: 2px solid #fff;
          border-radius: 4px;
          box-shadow: 5px 5px 16px 2px rgb(163 176 203 / 10%);

          &:hover {
            box-shadow: 7px 5px 30px 2px rgb(163 176 203 / 26%);
          }

          span {
            font-family: PingFangSC-Regular, "PingFang SC";
            font-size: 22px;
            font-weight: 400;
            line-height: 30px;
            color: #000;
          }
        }
      }
    }
  }
}